<template>
  <div class="login">
    <div class="loginBox">
      <div class="nav">
        <div class="d"><i class="el-icon-video-camera-solid"></i>极致睿诚</div>
        <div class="d1">欢迎登录</div>
        <!-- 登录 -->
        <el-form
          :model="numberValidateForm"
          ref="numberValidateForm"
          label-width="290px"
          class="demo-ruleForm"
        >
          <!-- 用户名 -->
          <el-form-item
            label="用户名"
            prop="name"
            :rules="[{ required: true, message: '用户名不能为空' }]"
          >
            <el-input v-model="numberValidateForm.name"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item
            label="密码"
            prop="password"
            :rules="[{ required: true, message: '密码不能为空' }]"
          >
            <el-input v-model="numberValidateForm.password"></el-input>
          </el-form-item>
          <!-- 提交 -->
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm('numberValidateForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getLogin } from "../../https/api";
export default {
  data() {
    return {
      numberValidateForm: {
        name: "",
        password: "",
      },
    };
  },
  methods: {
    submitForm() {
      getLogin(this.numberValidateForm).then((res) => {
        if (res.data.code == 200) {
          let user = res.data.data.filter(
            (item) => item.name == this.numberValidateForm.name
          );
          if (user) {
            if ( user[0].password != this.numberValidateForm.password) {
          this.$message.error("登录失败");  
            } else if (
              user[0].name == this.numberValidateForm.name &&
              user[0].password == this.numberValidateForm.password
            ) {
              this.$message.success("登录成功");
              localStorage.setItem(
                "token",
                "fesrztareqadsf5d43543dsa54f5d5as4f3dsfa"
              );
              localStorage.setItem("user", JSON.stringify(res.data.data));
              this.$router.push({ name: "index", path: "/index" });
            }
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {},
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.login {
  width: 100vw;
  height: 100vh;
  background-image: url("../../image/bj.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.loginBox {
  width: 50%;
  height: 400px;
  /* border: 1px solid white; */
  margin: 0 auto;
  position: relative;
  top: 150px;
}
.nav {
  width: 100%;
  height: 50px;
  /* border: 1px solid white; */
  text-align: center;
  line-height: 50px;
  color: white;
}
.d {
  font-size: 30px;
  font-weight: 600;
  color: #333;
}
.d1 {
  font-size: 20px;
  font-weight: 600;
}
.in1 {
  width: 200px;
}
.demo-ruleForm {
  float: left;
  margin-top: 20px;
}
</style>